<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.7.0.2.946"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>what are character maps</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh19";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body class="xr_bgb19">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 1400px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_xri_" style="width: 760px; height: 1400px;">
 <span class="xr_ar" style="left: -564px; top: 1335px; width: 1900px; height: 65px; background-color: #2F7FAC;"></span>
 <div class="xr_s1" style="position: absolute; left:36px; top:189px; width:684px; height:942px;">
  <span class="xr_tl xr_s1" style="top: -14px;">Character Maps represent one of the great benefits of using Spriter's modular animation method. Character </span>
  <span class="xr_tl xr_s1" style="top: 3px;">Maps allow you to quickly and easily create variations of a character (or object), or entirely new </span>
  <span class="xr_tl xr_s1" style="top: 21px;">characters (or objects) by taking the animations you've already created and swapping out some or all of </span>
  <span class="xr_tl xr_s0" style="top: 39px;font-family:Times New Roman;"><span class="xr_s1" style="">images with new ones.</span></span>
  <span class="xr_tl xr_s1" style="top: 80px;">Imagine you're making a game where the hero character can acquire new weapons, armor etc.&nbsp; With </span>
  <span class="xr_tl xr_s1" style="top: 98px;">Spriter and Character Maps, you can animate your character once, and simply create and combine </span>
  <span class="xr_tl xr_s1" style="top: 115px;">Character Maps to instantly create and preview any combination of the alternate attire and equipment.&nbsp; </span>
  <span class="xr_tl xr_s1" style="top: 133px;">These visual variations on your character can of course be exported out as sequential images for use in </span>
  <span class="xr_tl xr_s1" style="top: 151px;">game engines without direct support for Spriter animation data, however the real benefits are realized </span>
  <span class="xr_tl xr_s1" style="top: 168px;">when you use the actual Spriter animation data and Character Maps within your game engine, giving you </span>
  <span class="xr_tl xr_s1" style="top: 186px;">silky smooth tweened animation for a potentially massive collection of characters and variations of </span>
  <span class="xr_tl xr_s1" style="top: 204px;">characters using a tiny fraction of the time, file-space, and ram (heap) that non-modular animation </span>
  <span class="xr_tl xr_s0" style="top: 222px;font-family:Times New Roman;"><span class="xr_s1" style="">methods would require.</span></span>
  <span class="xr_tl xr_s1" style="top: 263px;">You can not only swap imageswith other images, you can also designate images to be &#8220;hidden&#8221; (or not </span>
  <span class="xr_tl xr_s1" style="top: 280px;">drawn on screen) in any given Character Map.&nbsp; Picture a game character which starts out with no cape, but </span>
  <span class="xr_tl xr_s1" style="top: 298px;">can later acquire one.... You'd animate your character with the cape, then create the starting Character Map </span>
  <span class="xr_tl xr_s1" style="top: 316px;">to hide all the cape images, then use a new character map,(or in this case, just turn off the no-cape </span>
  <span class="xr_tl xr_s1" style="top: 333px;">Character Map) to reveal the cape.&nbsp; The possibilities are endless...Sunglasses, hats, helmets, knee-pads, </span>
  <span class="xr_tl xr_s0" style="top: 351px;font-family:Times New Roman;"><span class="xr_s1" style="">wings, scorpion tails, you name it!</span></span>
  <span class="xr_tl xr_s0" style="top: 392px;font-family:Times New Roman;"><span class="xr_s4" style="">Before you Begin making Character Maps:</span></span>
  <span class="xr_tl xr_s1" style="top: 433px;">There are several important things to keep in mind while animating and creating your initial character </span>
  <span class="xr_tl xr_s0" style="top: 451px;font-family:Times New Roman;"><span class="xr_s1" style="">which you'll want to use with Character Maps:</span></span>
  <span class="xr_tl xr_s1" style="top: 469px;">1) Organizing the part images for your initial character into separate folders based on groups of images </span>
  <span class="xr_tl xr_s1" style="top: 486px;">you'll want to replace in Character Maps will save you lots of time.&nbsp; For example, having a single folder </span>
  <span class="xr_tl xr_s1" style="top: 504px;">specifically for each character variations head images will make it much easier to find and designate the </span>
  <span class="xr_tl xr_s1" style="top: 522px;">corresponding images. In fact, Spriter can actually automate the association of images with replacement </span>
  <span class="xr_tl xr_s0" style="top: 539px;font-family:Times New Roman;"><span class="xr_s1" style="">images if you stay organized.&nbsp; More on this is a moment.</span></span>
  <span class="xr_tl xr_s1" style="top: 557px;">2) Things will be quicker and easier still of you give all alternate images the same exact name and image </span>
  <span class="xr_tl xr_s1" style="top: 575px;">size as the original images use to create your animations (just in a new folder).&nbsp; For example, notice how </span>
  <span class="xr_tl xr_s1" style="top: 593px;">in this simple demo project, there are two image folders, one called &#8220;red&#8221; which contains the handful of </span>
  <span class="xr_tl xr_s1" style="top: 610px;">images used to create the animated character, and the folder called &#8220;blue&#8221; which contain the corresponding </span>
  <span class="xr_tl xr_s1" style="top: 628px;">images required to change the default red character into the very different looking blue character.&nbsp; Notice </span>
  <span class="xr_tl xr_s0" style="top: 646px;font-family:Times New Roman;"><span class="xr_s1" style="">how the corresponding images in each folder have the exact same name and images size.</span></span>
  <span class="xr_tl xr_s1" style="top: 687px;">IMPORTANT: These are suggestions which can keep your project well organized and save you time if </span>
  <span class="xr_tl xr_s1" style="top: 704px;">you plan on creating many character variations which swap many images with alternate ones, but these are </span>
  <span class="xr_tl xr_s1" style="top: 722px;">NOT requirements!&nbsp; If you only plan of replacing a few images with Character Maps, or simply don't want </span>
  <span class="xr_tl xr_s1" style="top: 740px;">to give your folder and images structures this much forethought, it is by no means a necessity.</span>
 </div>
 <div class="xr_s4" style="position: absolute; left:297px; top:128px; width:10px; height:10px;">
  <span class="xr_tl xr_s4" style="top: -14px;">What Are Character Maps</span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 71px; width: 1900px; height: 24px; background-color: #2F7FAC;"></span>
 </a>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar xr_t18705" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 0px; width: 1900px; height: 70px; background-color: #5DABD7; -o-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -webkit-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -ms-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);"></span>
 <!--[if lt IE 9]><style type="text/css">.xr_t18705 {margin-left:0px; margin-top:0px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.000,M21=-0.000,M12=0.000,M22=-1.000,sizingMethod='auto expand')}</style><![endif]-->
 </a>
 <div class="Heading_1" style="position: absolute; left:174px; top:47px; width:10px; height:10px;font-size:21px;color:#FFFFFF;">
  <h1 class="xr_tl Heading_1" style="top: -29px;font-size:21px;color:#FFFFFF;margin:0;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="font-size:32px;color:#FFFFFF;">Spriter Pro</span></a><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="color:#FFFFFF;">&nbsp;User&#8217;s Manual version 1.0</span></a></h1>
 </div>
 <div class="xr_s2" style="position: absolute; left:243px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -50px; top: -11px; width: 100px;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Quickstart</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:350px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -35px; top: -11px; width: 69px;"><a href="default%20pivot%20points.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Sprites</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:441px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -31px; top: -11px; width: 63px;"><a href="creating%20and%20assigning%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Bones</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:543px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -49px; top: -11px; width: 98px;"><a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Animating</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:679px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -79px; top: -11px; width: 157px;"><a href="javascript:;" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Character Maps</span></a></span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/196.jpg" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 8px; top: 1px; width: 93px; height: 93px;"/>
 </a>
 <div class="xr_s2" style="position: absolute; left:132px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -27px; top: -11px; width: 54px;"><a href="index.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Index</span></a></span>
 </div>
 <a href="adding%20action%20points%20to%20frames.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/197.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <a href="adding%20action%20points%20to%20frames.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/198.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 1284px; width: 34px; height: 34px;"/>
 </a>
 <a href="create%20a%20character%20map.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/199.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 1284px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <a href="create%20a%20character%20map.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/200.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>